<script setup>
import * as THREE from 'three';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
import { GUI } from 'three/examples/jsm/libs/lil-gui.module.min.js'

// 场景
const scene = new THREE.Scene();

const axesHelper = new THREE.AxesHelper(5);

// 透视相机，近大远小，符合我们的眼睛感觉
const camera = new THREE.PerspectiveCamera(
   45, // 视角
   window.innerWidth / window.innerHeight, // 窗口宽高比
   0.1, // 近平面
   1000 // 远平面
);

// 渲染器
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// // 几何体
// const geometry = new THREE.BoxGeometry(1, 1, 1);
// // 材质
// const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
// material.wireframe = true; // 线框模式
// // 网格
// const cube = new THREE.Mesh(geometry, material);

// // 将创建的物体加到场景中
// scene.add(cube);
scene.add(axesHelper);

const geometry = new THREE.BufferGeometry();
// // 逆时针为正面，一个面由2个三角形组成
// const vertices = new Float32Array([
//   // x, y, z
//   -1.0, -1.0, 0.0,
//   1.0, -1.0, 0.0,
//   1.0, 1.0, 0.0,

//   1.0, 1.0, 0.0,
//   -1.0, 1.0, 0.0,
//   -1.0, -1.0, 0.0
// ]);
// geometry.setAttribute('position', new THREE.BufferAttribute(vertices, 3));
const vertices = new Float32Array([
  // x, y, z
  -1.0, -1.0, 0.0,
  1.0, -1.0, 0.0,
  1.0, 1.0, 0.0,

  // 1.0, 1.0, 0.0,
  -1.0, 1.0, 0.0,
  // -1.0, -1.0, 0.0
])
geometry.setAttribute('position', new THREE.BufferAttribute(vertices, 3));
geometry.setIndex([
  0, 1, 2,
  2, 3, 0
])
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00, side: THREE.DoubleSide, wireframe: true });
const plane = new THREE.Mesh(geometry, material);
scene.add(plane);

// 设置相机的初始位置
camera.position.z = 5;
camera.position.x = 2;
camera.position.y = 2;
// 设置相机看向的位置, 默认就是这个，也可以不设置
camera.lookAt(0, 0, 0);

const controls = new OrbitControls(camera, renderer.domElement);
controls.enableDamping = true;
// 设置阻尼系数
controls.dampingFactor = 0.05;

// 渲染函数
function animate() {
  controls.update();
    requestAnimationFrame(animate);
    // 渲染
    renderer.render(scene, camera);
}

animate();

// 监听窗口变化
window.addEventListener('resize', () => {
  // 更新相机
  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();
  // 更新渲染器
  renderer.setSize(window.innerWidth, window.innerHeight);
  renderer.setPixelRatio(window.devicePixelRatio);
});

let enventObj = {
  FullScreen: function () {
    document.body.requestFullscreen();
    console.log('全屏');
  },
  ExitFullScreen: function () {
    document.exitFullscreen();
    console.log('退出全屏');
  }
}

const gui = new GUI();
gui.add(enventObj, 'FullScreen').name('全屏');
gui.add(enventObj, 'ExitFullScreen').name('退出全屏');

</script>

<template>
  <div></div>
</template>

<style>
* {
  margin: 0;
  padding: 0;
}

canvas {
  display: block;
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
}
</style>
